import React, {  useState,useCallback } from 'react';
import { SearchBar } from 'antd-mobile'
import { withRouter } from 'react-router-dom'


const Header = props => {

    //路由地址
    const sys_path = props.location.pathname

    const [value,setvalue] = useState('')

    const on_search = useCallback(value =>{
        setvalue(value)
        props.history.push(`/main/home/search/${value}`)
    },[])

    const on_clear = useCallback(() => {
        setvalue('')
        if (sys_path.indexOf('/main/home/search/') !== -1){
            props.history.push('/main/home/news')
        }
     },[sys_path])

    const on_change = useCallback(value => setvalue(value),[])
    

    return ( 
        <div>
            <SearchBar 
            value = {value}
            placeholder="根据关键词查询（新闻、视频、人物）" 
            maxLength={10} 
            onSubmit = {value=>on_search(value)}
            onChange = {value=>on_change(value)}
            onClear={value => on_clear(value)}
         
            />
        </div>
    );

}








export default withRouter(Header);